<template>
  <div class="coverStatus">
    <Form :model="searchForm" ref="serviceForm" slot="adaption-bar" label-position="top" class="form" inline>
      <Form-item>
        <Select
          v-if="false"
          :disabled="userCode !== 'CRC'"
          style="width: 100%;"
          clearable
          filterable
          v-model="userCode"
          placeholder="请选择业务单元"
        >
          <Option v-for="item in bisUnitList" :value="item.key" :key="item.key">{{ item.value }}</Option>
        </Select>
        <!-- <Input v-else v-model="userBu" :disabled="true" :maxlength="300" :rows="1" placeholder="请输入" /> -->
      </Form-item>
      <Form-item>
        <Select style="width: 100%;" filterable clearable v-model="searchForm.period" placeholder="请选择填报周期">
          <Option v-for="item in quarterList" :value="item.value" :key="item.value">{{ item.value }}</Option>
        </Select>
      </Form-item>
      <Form-item>
        <Select style="width: 100%;" filterable clearable v-model="searchForm.state" placeholder="请选择状态">
          <Option v-for="item in stateList" :value="item.stateValue" :key="item.stateValue">{{
            item.stateValue
          }}</Option>
        </Select>
      </Form-item>
      <Form-item>
        <RPButton optType="search" ref="search" @click="search()" />
      </Form-item>
    </Form>

    <InnerPageTable ref="userTable" :config="pageTableConfig">
      <div slot="table-bar">
        <RPButton :disabled="showCreateBtn" optType="create" class="btn" ref="create" @click="createStatue" />
        <RPButton
          :disabled="showCreateBtn"
          class="btn"
          btnType="default"
          ref="create"
          text="无更新_确认引用上期数据"
          @click="noUpdate"
        />
      </div>
    </InnerPageTable>
  </div>
</template>

<script>
import cover2Api from '@/api/cover2'
import createStatue from '../createStatus.vue'
import status from '../coverPage/status.vue'
import goal from '../coverPage/goal.vue'
import { columnCoverStatus } from '../columns'
import { mapState } from 'vuex'
export default {
  name: 'coverStatus',
  data() {
    return {
      searchForm: {
        bisUnit: '',
        period: '',
        state: ''
      },
      selectionsID: [],
      bisUnitList: [],
      records: [],
      allDatas: []
    }
  },
  props: {
    tabKey: {
      type: String,
      default: 'coverStatus'
    }
  },

  computed: {
    ...mapState(['quarterList', 'stateList']),
    pageTableConfig() {
      return {
        loadDataFn: this.tabKey === 'coverStatus' ? this.getStatusTableData : this.getGoalTableData,
        // tableData: this.tabKey === 'coverStatus' ? [] : this.goalTableData,
        columns: columnCoverStatus.bind(this)(),
        autoFirst: false, //默认 就是 false, 要配置在这里
        // rowClickHandle: this.onRowClick
      }
    },
    showCreateBtn() {
      return this.allDatas.filter(item => item.dcPeriod === this.$store.state.writeablePeriod).length > 0
    },
    userCode() {
      return this.$store.state.userBu.key
    }
  },
  methods: {
    search(page = 1) {
      this.$refs['userTable'].load(this.searchForm, page)
    },
    createStatue() {
      new this.$sidelipPage(
        createStatue,
        {
          props: {
            height: 255,
            tabKey: this.tabKey,
            isCreate: true,
            buCode: this.userCode,
            buName: this.$store.state.userBu.value,
            dcPeriod: this.$store.state.writeablePeriod
          }
        },
        data => {
          this.search()
        }
      )
    },
    getShowCreateBtn() {
      const params = {
        currentPage: 1,
        pageSize: 100,
        buCode: this.userCode,
        dcPeriod: '',
        fgState: ''
      }
      if (this.tabKey === 'coverStatus') {
        cover2Api.getStatusData(params).then(res => {
          let { records } = res.data
          this.allDatas = records
        })
      } else {
        cover2Api.getGoalData(params).then(res => {
          let { records } = res.data
          this.allDatas = records
        })
      }
    },
    getStatusTableData(tableObj) {
      let { responseProcess, param } = tableObj
      let { pageNum, pageSize } = param
      const params = {
        currentPage: pageNum,
        pageSize: pageSize,
        buCode: this.searchForm.bisUnit,
        dcPeriod: this.searchForm.period,
        fgState: this.searchForm.state
      }
      cover2Api.getStatusData(params).then(res => {
        let { current, pages, size, total, records } = res.data
        this.records = records
        responseProcess({
          pageNum: Number(current),
          pageSize: Number(size),
          pages: Number(pages),
          records: records || [],
          total: Number(total)
        })
      })
    },

    getGoalTableData(tableObj) {
      let { responseProcess, param } = tableObj
      let { pageNum, pageSize } = param
      const params = {
        currentPage: pageNum,
        pageSize: pageSize,
        buCode: this.searchForm.bisUnit,
        dcPeriod: this.searchForm.period,
        fgState: this.searchForm.state
      }
      cover2Api.getGoalData(params).then(res => {
        let { current, pages, size, total, records } = res.data
        this.records = records
        // this.showCreateBtn = this.records.filter(item => item.dcPeriod === this.$store.state.writeablePeriod).length > 0
        // console.log("this.showCreateBtn", this.showCreateBtn)
        responseProcess({
          pageNum: Number(current),
          pageSize: Number(size),
          pages: Number(pages),
          records: records || [],
          total: Number(total)
        })
      })
    },
    pageTableSelection(tabeVal) {
      // 获取所有选中项
      this.selectionsID = []
      tabeVal.forEach(item => {
        this.selectionsID.push(item.id)
      })
    },
    onRowClick(row) {
      if (row.fgState === '审核通过' || row.fgState === '待审核') {
        new this.$sidelipPage(
          this.tabKey === 'coverStatus' ? status : goal,
          {
            props: {
              buCode: row.buCode,
              dcPeriod: row.dcPeriod
            }
          },
          data => {
            data && this.search()
          }
        )
      } else {
        new this.$sidelipPage(
          createStatue,
          {
            props: {
              height: 255,
              tabKey: this.tabKey,
              fgState: row.fgState,
              buCode: row.buCode,
              buName: this.$store.state.userBu.value,
              dcPeriod: row.dcPeriod
            }
          },
          data => {
            data && this.search()
          }
        )
      }
    },
    deleteFun(row) {
      this.$confirm({
        content: '是否确定删除?'
      }).then(() => {
        const params = {
          buCode: row.buCode,
          dcPeriod: row.dcPeriod,
          type: this.tabKey === 'coverStatus' ? 1 : 0
        }
        cover2Api.removeForm(params).then(res => {
          if (res.data.code === 200) {
            this.$Message.success('删除成功')
            this.search()
          }
        })
      })
    },
    noUpdate() {
      this.$confirm({
        content: '是否引用上期数据?'
      }).then(() => {
        let host = location.host
        if (host.includes('sit')) {
          host = 'crinfo-uat.test.crcloud.com'
        }
        let pcUrl = encodeURIComponent(
          `https://${host}/form.html?formType=${this.tabKey}&buCode=${this.$store.state.userBu.key}&dcPeriod=${this.$store.state.writeablePeriod}&type=cover`
        )
        let params = {
          buCode: this.userCode,
          dcPeriod: this.$store.state.writeablePeriod,
          refPreviousData: true,
          currentPage: 1,
          pageSize: 1000,
          buName: this.$store.state.userBu.value,
          pcUrl
        }
        if (this.tabKey === 'coverStatus') {
          cover2Api.getCreateStatusData(params).then(res => {
            // 提交表单
            this.$Message.success({
              content: '新建成功',
              duration: 3
            })
            setTimeout(() => {
              this.getShowCreateBtn()
              this.search()
            }, 3000)
          }).catch(res => {
            if (res.data.message.includes('目标')) {
              this.$confirm({
                content: `${res.data.message},是否跳转到覆盖度目标填报数据?`
              }).then(() => {
                this.$emit('changeTab', 'coverGoal')
              })
            }
          })
        } else {
          cover2Api.getCreateGoalData(params).then(res => {
            this.$Message.success({
              content: '新建成功',
              duration: 3
            })
            setTimeout(() => {
              this.getShowCreateBtn()
              this.search()
            }, 3000)
          })
        }
      })
    }
  },
  mounted() {
    this.getShowCreateBtn()
    this.search()
  }
}
</script>

<style lang="less" scoped>
.form {
  // display: flex;
  // justify-content: space-around;
  margin: 0 20px;
}
/deep/.btn:disabled {
  background: #f7f7f7 !important;
  color: #c5c8ce !important;
  border-color: #dcdee2 !important;
}
</style>
